<!-- 发布商品的页面 -->
<html>

<head>
    <meta charset="utf-8">
    <title>Layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="css/layui.css" media="all">
    <!--  axios-->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="../front/assets/js/vue.js"></script>

    <script src="js/backHead.js"></script>
    <!--  文件上传-->
    <link rel="stylesheet" href="dropzone-5.7.0/dist/dropzone.css"/>
    <link rel="stylesheet" href="dropzone-5.7.0/dist/min/basic.min.css"/>

    <script src="dropzone-5.7.0/dist/min/dropzone.min.js"></script>

    <style>
        .dropzone {
            border: 2px dashed #0087F7;
            border-radius: 5px;
            background: white;
        }
    </style>
    <script>

    </script>
</head>

<body>
<!--    文件上传-->
<div class="layui-card">
    <div class="layui-card-header">商品图片</div>
    <div class="layui-card-body">
        <div id="dropz" class="dropzone"></div>
    </div>
</div>


<form id="app1" class="layui-form layui-form-pane" lay-filter="example" action="">
    <div class="layui-form-item">
        <div class="layui-input-inline">
            <input type="hidden" name="furnitureImg" id="furnitureImg" class="layui-input" lay-verify="furnitureImg"  >
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">商品名称</label>
        <div class="layui-input-inline">
            <input type="text" name="furnitureName" lay-verify="required" placeholder="请输入商品名称" autocomplete="off"
                   class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">价格</label>
            <div class="layui-input-inline" style="width: 100px;">
                <input type="text" name="price" lay-verify="price" placeholder="￥" autocomplete="off"
                       class="layui-input">
            </div>


        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">商品类别</label>
        <div class="layui-input-block">
            <div id="view"></div>
        </div>
    </div>


    <div class="layui-form-item layui-form-text">
        <label class="layui-form-label">详情</label>
        <div class="layui-input-block">
            <textarea name="describe" placeholder="请输入内容" lay-verify="describe" class="layui-textarea"></textarea>
        </div>
    </div>
    <div class="layui-form-item">
        <button class="layui-btn" lay-submit="" lay-filter="demo2">发布商品</button>
    </div>
</form>


<script src="layui.js" charset="utf-8"></script>
<script src="../front/component/js/head.js"></script>
<script src="js/addItem.js"></script>

<script id="tpl" type="textml">
    <select name="categoryId" >
        {{# layui.each(d, function(index, item){ }}
        <option value='{{ item.categoryId }}'>{{ item.categoryName }}</option>
        {{# }); }}
    <select>
</script>

<script>
    layui.use(['form','laytpl','jquery'], function () {
        var form = layui.form,
            layer = layui.layer,
            layedit = layui.layedit,
            $ = layui.$,
            laytpl = layui.laytpl,
            laydate = layui.laydate;

        // 获取分类，并渲染模板
        $.get({
            url: PATH+"/category/getAll"
            , dataType: 'json'
            , success: function (resp) {
                console.log(resp);
                    let data = resp.data;
                    console.log(data);
                    let template = $('#tpl').html();
                    console.log(template);
                    laytpl(template).render(data, function (html) {
                        $('#view').html(html);
                    });
                    form.render('select');
            }
        });

        //自定义验证规则
        form.verify({
            title: function (value) {
                if (value.length < 5) {
                    return '标题至少得5个字符';
                }
            },
            price: function (value) {
                if (value <= 0) {
                    return '价格不能小于等于0';
                }
            },
            describe: function (value) {
                if (value.length < 5) {
                    return '描述至少得5个字符';
                }
            },
            furnitureImg: function(value){
                if(value.length < 1){
                    return '您必须上传图片'
                }
            }
        });

        //监听指定开关
        form.on('switch(switchTest)', function (data) {
            layer.msg('开关checked：' + (this.checked ? 'true' : 'false'), {
                offset: '6px'
            });
            layer.tips('温馨提示：请注意开关状态的文字可以随意定义，而不仅仅是ON|OFF', data.othis)
        });

        //监听提交
        form.on('submit(demo2)', function (data) {
            // layer.alert(JSON.stringify(data.field), {
            //     title: '最终的提交信息'
            // })
            // layer.alert(data.field)
            axios.post(PATH+"/furniture/add",{
                furnitureName:data.field.furnitureName,
                describe:data.field.describe,
                categoryId:data.field.categoryId,
                furnitureImg:data.field.furnitureImg,
                price:data.field.price
            }).then((resp)=>{
                if(resp.data.flag==false){
                    layer.alert("添加失败"), {
                        title: '提示'
                    }
                    return false;
                }else{
                    layer.alert("添加成功"), {
                        title: '提示'
                    }
                    return true;
                }
            })
            return false;
        });

        // //表单赋值
        // layui.$('#LAY-component-form-setval').on('click', function () {
        //     form.val('example', {
        //         "username": "贤心",
        //         "price": 10,
        //         "interest": 1,
        //         "describe": "我爱 layui"
        //     });
        // });

        //表单取值
        layui.$('#LAY-component-form-getval').on('click', function () {
            var data = form.val('example');
            alert(JSON.stringify(data));
        });

    });
</script>

</body>

</html>